<template>
	<div class="bind-dialog groups-list-table">
		<el-dialog title="绑定技能分组" width="50%" :visible.sync="showBindDialog" :before-close="closeBindDialog" class="">
			<Table :tableData="groupsList.tableData" width="100%" ref="tableEle" @changeSelect="changeSelect" @currentChange="currentChange" />
			<div class="page">
				<PageSize :pages="pages" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
			</div>
			<div class="btn">
				<el-button @click="saveGroup">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import PageSize from '../components/PageSize.vue';
import Table from '../components/Table.vue';
export default {
	components: {
		PageSize,
		Table
	},
	props: {
		showBindDialog: {
			type: Boolean,
			default: () => false
		},
		groupsList: {
			type: Object,
			default: () => {},
			require: true
		}
	},
	data() {
		return {
			pages: {}
		};
	},
	mounted() {
		const { page, pageSize, total } = this.groupsList;
		this.pages = { page: page, pageSize: pageSize, total: total };
	},
	computed: {},
	methods: {
		closeBindDialog() {
			this.$emit('closeBindDialog');
		},
		changeSelect(val) {
			this.$emit('changeSelect', val);
		},
		currentChange(val) {
			this.$emit('currentChange', val);
		},
		changePageSize(pageSize) {
			this.$emit('changePageSize', pageSize);
		},
		changeCurrentPage(page) {
			this.$emit('changeCurrentPage', page);
		},
		saveGroup() {
			this.$emit('saveGroup');
		}
	}
};
</script>

<style lang="less" scoped>
.bind-dialog {
	.page {
		margin-top: 20px;
	}
	.btn {
		text-align: right;
		margin-top: 20px;
		.el-button {
			background-color: #6384fe;
			color: #fff;
		}
	}
}
</style>
